<template>
  <!-- 设置 -->
  <a-dropdown v-model="mapSetVisible" :trigger="['click']" :disabled="disabled">
    <span
      class="setting-icon"
      :class="{ 'dropdown-open': mapSetVisible, 'disabled-icon': disabled }"
    >
      插入
      <a-icon :type="'down'" />
    </span>
    <div slot="overlay" class="setting-container">
      <div
        v-for="item in insertionList"
        :key="item.englishName"
        class="insertion-item"
      >
        <div class="insertion-icon" @click="insert">
          <a-icon-font :type="item.icon" />
        </div>
        <div class="insertion-text">
          {{ item.name }}
        </div>
      </div>
    </div>
  </a-dropdown>
</template>

<script lang="ts">
/**
 * gis 地图插入设置
 */
import { Component, Vue } from 'vue-property-decorator'

@Component({
  components: {},
})
export default class MapInsertionSet extends Vue {
  public mapSetVisible: boolean = false
  public disabled: boolean = true

  public insertionList: any = [
    {
      englishName: 'text',
      name: '文本框',
      icon: 'iconwenbenkuangbeifen',
    },
    {
      englishName: 'compass',
      name: '指北针',
      icon: 'iconzhibeizhenbeifen',
    },
    {
      englishName: 'legend',
      name: '图例',
      icon: 'icontulibeifen',
    },
    {
      englishName: 'scale',
      name: '比例尺',
      icon: 'iconbiaochibeifen',
    },
  ]

  public insert(insertion: any) {
    console.log(insertion)
  }
}
</script>

<style scoped lang="less">
@import '@/styles/scroll-bar';

.setting-icon {
  border-radius: 2px;
  //cursor: pointer;
  margin: 0 5px;
  padding: 1px 4px;
  user-select: none;

  .map-type-layer-set {
    margin-right: 6px;
  }
}

.disabled-icon {
  cursor: not-allowed !important;

  .map-type-layer-set {
    color: #e9e9e9;
  }
}

.setting-container {
  background: #fff;
  background-clip: padding-box;
  border-radius: 4px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.18);
  display: flex;
  justify-content: space-around;
  margin-top: 5px;
  padding: 12px 0;
  user-select: none;
  width: 234px;

  .insertion-item {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 40px;

    .insertion-icon {
      align-items: center;
      cursor: pointer;
      display: flex;
      font-size: 28px;
      height: 32px;
      justify-content: center;
      width: 32px;
    }

    .insertion-text {
      color: #5d637e;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 1px;
      text-align: center;
    }

    &:hover {
      .insertion-icon {
        background-color: rgba(103, 113, 252, 0.1);
      }
    }
  }

  .insertion-active {
    .insertion-icon {
      background-color: rgba(103, 113, 252, 0.1);
    }
  }
}
</style>
